<template>
  <div>
    <!-- v-model的底层： :value="value" @input="value = $event" -->
    <!-- 单向数据流问题：  -->
    <!-- v-model="a"  不能使用 v-model，只能使用 value属性，只向级联选择器 传递数据，不能修改 -->
    <el-cascader
      :value="value"
      :options="options"
      clearable
      :props="{value: 'id', label: 'name'}"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { companyDepartmentRequest } from '@/api/department'
import { transformListToTree } from '@/utils'

export default {
  name: '',
  // props: ['a'],
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      options: []
    }
  },
  created() {
    this.companyDepartmen()
  },
  methods: {
    handleChange(value) {
      console.log(value)
      // 我们在自定义组件的时候，哪些属性的名称，还有自定义的事件，应该想 value input update:xxx 靠拢
      if (value.length > 0) {
        this.$emit('input', value[value.length - 1])
      } else {
        this.$emit('input', 0)
      }
    },
    async companyDepartmen() {
      const res = await companyDepartmentRequest()

      this.options = transformListToTree(res.data, 0)
      console.log(this.options)
    }
  }
}
</script>
